<!--
 * @Author: GL
 * @Date: 2022-10-04 19:03:13
 * @LastEditors: GL
 * @LastEditTime: 2023-04-05 02:11:43
 * @Description: 个人信息
-->
<template>
  <div>
    <div class="continer">
      <div class="left">
        <div class="title">个人信息</div>
        <div class="img">
          <img :src="avatar" alt="" />
          <div class="add">+</div>
        </div>
        <div class="info">
          <div class="item">
            <div>用户名称</div>
            <div>{{ nickname }}</div>
          </div>
          <div class="item">
            <div>性别</div>
            <div>{{ sex }}</div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="base">基本资料</div>
        <div>
          <el-menu :default-active="1" class="el-menu-demo" mode="horizontal">
            <el-menu-item index="1">基本资料</el-menu-item>
            <el-menu-item index="2">密码修改</el-menu-item>
          </el-menu>
          <div style="margin: 20px" />
          <el-form label-width="100px" :model="reactive" style="max-width: 460px">
            <el-form-item label="姓名">
              <el-input v-model="reactive.name" />
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="reactive.region" />
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="reactive.type" />
            </el-form-item>
            <div class="btn">
              <el-button type="primary" @click="submitForm(ruleFormRef)">修改</el-button>
              <el-button @click="resetForm(ruleFormRef)">取消</el-button>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { userInfo } from "../../network/user.js";
export default {
  data() {
    return {
      nickname: "",
      avatar: "",
      sex: "",
      reactive: {
        name: "",
        region: "",
        type: "",
      },
    };
  },
  created() {
    const token = window.sessionStorage.getItem("token");
    userInfo(token).then((res) => {
      console.log(res);
      this.nickname = res.data.name;
      this.avatar = res.data.pic;
      this.sex = res.data.sex;
    });
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.continer {
  display: flex;

  .left {
    padding: 2%;
    flex: 3;
    border: 1px solid #f6f6f6;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);

    .title {
      border-bottom: 1px solid #f6f6f6;
      padding-bottom: 2%;
    }

    .img {
      padding: 3% 0;
      text-align: center;
      border: 1px solid #f6f6f6;
      position: relative;

      img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
      }

      .add {
        background-color: aquamarine;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        // display: none;
        position: absolute;
        top: 20%;
        left: 44%;
        font-size: 60px;
        color: red;

        &:hover {
          display: block;
        }
      }
    }

    .info {
      .item {
        font-size: 14px;
        height: 40px;
        line-height: 40px;
        padding: 0 2%;
        display: flex;
        justify-content: space-between;
        border: 1px solid #f6f6f6;
      }
    }
  }

  .right {
    margin-left: 2%;
    padding: 2%;
    flex: 6;
    border: 1px solid #f6f6f6;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);

    .base {
      border-bottom: 1px solid #f6f6f6;
      padding-bottom: 2%;
    }

    .btn {
      text-align: center;
    }
  }
}
</style>